<template>
   <h1>统计表</h1> 
  <div class="chart-container">
    <!-- 顶部控制栏 -->
    <div class="chart-header">
      <h2>商品销售数据分析</h2>
      <div class="controls">
        <button 
          v-for="type in chartTypes" 
          :key="type.value"
          :class="{ active: chartType === type.value }"
          @click="setChartType(type.value)"
        >
          {{ type.label }}
        </button>
      </div>
    </div>

    <!-- 主图表区域 -->
    <div ref="chartDom" class="chart-main"></div>

    <!-- 数据筛选区 -->
    <div class="chart-footer">
      <select v-model="selectedPeriod" @change="updateData">
        <option v-for="period in timePeriods" :key="period" :value="period">
          {{ period }}
        </option>
      </select>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';

export default {
  setup() {
    // 图表实例和配置
    const chartDom = ref(null);
    let chartInstance = null;
    
    // 响应式数据
    const chartType = ref('bar');
    const selectedPeriod = ref('week');
    const chartData = ref({
      xData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      yData: [25, 38, 42, 18, 15, 32]
    });

    // 配置选项
    const chartTypes = [
      { value: 'bar', label: '柱状图' },
      { value: 'line', label: '折线图' },
      { value: 'pie', label: '饼图' }
    ];
    
    const timePeriods = ['日数据', '周数据', '月数据', '季度数据'];

    // 初始化图表
    const initChart = () => {
      if (!chartDom.value) return;
      
      // 销毁旧实例
      if (chartInstance) {
        chartInstance.dispose();
      }
      
      // 创建新实例
      chartInstance = echarts.init(chartDom.value);
      updateChart();
    };

    // 更新图表配置
    const updateChart = () => {
      if (!chartInstance) return;
      
      const option = {
        title: {
          text: '商品销售统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c}'
        },
        grid: {
          containLabel: true
        }
      };

      // 根据图表类型添加配置
      if (chartType.value === 'bar') {
        option.xAxis = {
          type: 'category',
          data: chartData.value.xData
        };
        option.yAxis = { type: 'value' };
        option.series = [{
          name: '销量',
          type: 'bar',
          data: chartData.value.yData,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 1, color: '#188df0' }
            ])
          }
        }];
      }
      else if (chartType.value === 'line') {
        option.xAxis = {
          type: 'category',
          data: chartData.value.xData
        };
        option.yAxis = { type: 'value' };
        option.series = [{
          name: '销量',
          type: 'line',
          data: chartData.value.yData,
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(131, 191, 246, 0.5)' },
              { offset: 1, color: 'rgba(24, 141, 240, 0.1)' }
            ])
          }
        }];
      }
      else if (chartType.value === 'pie') {
        option.series = [{
          name: '销售占比',
          type: 'pie',
          radius: '55%',
          data: chartData.value.xData.map((name, index) => ({
            name,
            value: chartData.value.yData[index]
          })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }];
      }

      chartInstance.setOption(option);
    };

    // 切换图表类型
    const setChartType = (type) => {
      chartType.value = type;
    };

    // 更新数据
    const updateData = () => {
      // 根据选择的时间周期生成随机数据
      const multiplier = timePeriods.indexOf(selectedPeriod.value) + 1;
      chartData.value.yData = chartData.value.xData.map(
        () => Math.floor(Math.random() * 50 * multiplier)
      );
    };

    // 响应窗口大小变化
    const handleResize = () => {
      if (chartInstance) {
        chartInstance.resize();
      }
    };

    // 生命周期钩子
    onMounted(() => {
      initChart();
      window.addEventListener('resize', handleResize);
    });

    // 监听变化
    watch(chartType, updateChart);
    watch(chartData, updateChart, { deep: true });

    return {
      chartDom,
      chartType,
      setChartType,
      selectedPeriod,
      updateData,
      chartTypes,
      timePeriods
    };
  },
  
  beforeUnmount() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.chart-header {
  padding: 16px;
  background: linear-gradient(90deg, #3498db, #2c3e50);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.controls {
  display: flex;
  gap: 8px;
}

.controls button {
  padding: 6px 12px;
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.controls button.active {
  background: white;
  color: #3498db;
  font-weight: bold;
}

.chart-main {
  width: 100%;
  height: 400px;
}

.chart-footer {
  padding: 12px 16px;
  background: #f8f9fa;
  border-top: 1px solid #eee;
}

.chart-footer select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
</style>